<!--
 * @Description: AppAction 统一封装
 * @Author: liyujie
 * @Date: 2021/9/29
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/9/29
-->
<template>
    <section class="wrapper">
        <el-cascader
            v-model="modelData"
            :size="size"
            filterable
            :options="appActionOptions"
            ref="appAction"
            :props="props"
            style="width: 100%"
            @change="handleChange"
        />
        <div
            v-for="(item, index) in param_list"
            :key="index"
            class="param-item"
        >
            <!--输入框-->
            <template v-if="item.form_type === 'text'">
                <el-input
                    v-model="item.value"
                    clearable
                    :size="size"
                    :placeholder="`请输入${item.title}`"
                    style="width: 300px"
                    @input="handleInputChange"
                >
                    <template
                        class="param"
                        slot="prepend"
                    >{{ item.title }}
                    </template>
                </el-input>
                <span class="tips">*需要联系技术提供</span>
            </template>
            <!--选择框-->
            <template v-if="item.form_type === 'select'">
                <div
                    class="select-wrapper"
                    style="width: 300px"
                >
                    <div
                        class="prepend"
                        :style="{height: size === 'small' ? '32px' : '36px'}"
                    >
                        {{ item.title }}
                    </div>
                    <el-select
                        v-model="item.value"
                        filterable
                        :size="size"
                        placeholder="请选择"
                        @change="handleInputChange"
                    >
                        <el-option
                            v-for="item in item.selectList"
                            :key="item.value"
                            :label="item.title"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </template>
        </div>
    </section>
</template>

<script>
import {deepClone} from "@/assets/js/utils";

export default {
    name: 'AppAction',
    props: {
        value: {
            type: Object,
            default: () => {
                return {};
            }
        },
        size: {
            type: String,
            default: 'small'
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    data() {
        return {
            // 级联选择v-model数据
            modelData: [],
            // 级联选择器配置
            props: {
                expandTrigger: 'hover',
                label: 'title',
                children: 'target_list',
                value: 'target',
            },
            // action选项列表
            appActionOptions: [],
            // 文本、下拉选项列表
            param_list: []
        };
    },
    computed: {
        appAction: {
            get() {
                return this.value;
            },
            set(value) {
                this.$emit('change', value);
            }
        }
    },
    async mounted() {
        this.appActionOptions = await this.getAppActionOptions() || [];
    },
    methods: {
        /**
         * 获取app_action列表
         */
        getAppActionOptions() {
            return new Promise(((resolve, reject) => {
                this.$post('/student/app_action%5Cget_cascade_list', {}, resp => {
                    if (resp.code === 1) {
                        resp.data.list.forEach(item => {
                            item.target = item.action;
                        });
                        resolve(resp.data.list);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning'
                        });
                        reject(false);
                    }
                });
            }));
        },

        /**
         * 获取下拉数据的列表
         * @param action
         * @param target
         * @param param
         * @returns {Promise<unknown>}
         */
        getParamItemList(action, target, param) {
            return new Promise(((resolve, reject) => {
                this.$post('/student/app_action%5Cget_param_item_list', {action, target, param}, resp => {
                    if (resp.code === 1) {
                        resolve(resp.data.list);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning'
                        });
                        reject(false);
                    }
                });
            }));
        },

        /**
         * 选择的链接发生变化
         */
        handleChange() {
            let appAction = deepClone(this.appAction);
            let currentData = this.$refs.appAction.getCheckedNodes()[0];

            appAction.action = currentData.parent.data.action;
            appAction.target = currentData.value;
            appAction.param = {};
            this.param_list = deepClone(currentData.data.param_list);

            this.param_list.forEach(async item => {
                if (item.form_type === 'select') {
                    let selectList = await this.getParamItemList(appAction.action, appAction.target, item.param);

                    this.$set(item, 'selectList', selectList);
                }
                appAction.param[item.param] = '';
            });
            console.log('app_action变化✨', appAction);
            this.appAction = appAction;
        },

        /**
         * 表单输入项变化
         */
        handleInputChange() {
            let appAction = deepClone(this.appAction);

            this.param_list.forEach(item => {
                Object.keys(appAction.param).forEach(key => {
                    if (key === item.param) {
                        this.$set(appAction.param, key, item.value || '');
                    }
                });
            });
            console.log('app_action变化✨', appAction);
            this.appAction = appAction;
        },

        /**
         * 数据回显
         * @param value
         */
        setValue(value) {
            this.appAction = value;
            let appAction = deepClone(value);

            this.modelData = [appAction.action, appAction.target];
            setTimeout(() => {
                let currentData = this.$refs.appAction.getCheckedNodes()[0];
                let param_list = deepClone(currentData.data.param_list);

                param_list.forEach(async item => {
                    if (item.form_type === 'select') {
                        let selectList = await this.getParamItemList(appAction.action, appAction.target, item.param);

                        this.$set(item, 'selectList', selectList);
                    }
                    Object.keys(appAction.param).forEach(key => {
                        if (key === item.param) {
                            this.$set(item, 'value', appAction.param[key]);
                        }
                    });
                });
                this.param_list = param_list;
            });
        },

        /**
         * 重置字段
         */
        resetFields() {
            this.appAction = {
                action: '',
                target: '',
                param: {}
            };
            this.modelData = [];
            this.param_list = [];
        }
    }
};
</script>

<style scoped lang="less">
.param-item {
    display: flex;
    align-items: center;
    margin-top: 12px;

    .tips {
        color: #999;
        margin-left: 12px;
    }

    .select-wrapper {
        display: flex;
        align-items: center;

        .prepend {
            height: 100%;
            background-color: #F5F7FA;
            color: #909399;
            font-size: 13px;
            vertical-align: middle;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border: 1px solid #DCDFE6;
            border-right: 0;
            border-radius: 4px 0 0 4px;
            padding: 0px 20px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /deep/ .el-select {
            flex: 1;

            .el-input__inner {
                border-radius: 0 4px 4px 0;
            }
        }
    }
}
</style>
